import React from 'react';
import { Tabs } from 'antd';
import { useNode } from '@craftjs/core';
import AttributeSetting from './components/settingsComponents/attributeSetting';
import SearchSetting from './components/settingsComponents/searchSetting';
import HighSetting from './components/settingsComponents/highSetting';
import styles from './settings.less';

export default () => {
  const {
    props: {
      rowKey,
      search,
      header,
      indexRender,
      tableSize,
      columns,
      paging,
      initializationData,
      requestConfig,
    },
    actions: { setProp },
  } = useNode((node) => ({
    props: node.data.props,
  }));

  return (
    <div className={styles.settingContainer}>
      <Tabs>
        <Tabs.TabPane key="attribute" tab="属性">
          <div className={styles.settingContainerContent}>
            <AttributeSetting
              header={header}
              columns={columns}
              tableSize={tableSize}
              indexRender={indexRender}
              setProp={setProp}
            />
          </div>
        </Tabs.TabPane>
        <Tabs.TabPane key="search" tab="搜索">
          <div className={styles.settingContainerContent}>
            <SearchSetting search={search} setProp={setProp} />
          </div>
        </Tabs.TabPane>
        <Tabs.TabPane key="high-setting" tab="高级">
          <div className={styles.settingContainerContent}>
            <HighSetting
              rowKey={rowKey}
              paging={paging}
              initializationData={initializationData}
              requestConfig={requestConfig}
              setProp={setProp}
            />
          </div>
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};
